<template>
  <view class="container">
    <!-- 空 -->
    <view class="m-t-50" v-if="distributionList.length === 0">
      <u-empty></u-empty>
    </view>
    <view v-else>
      <!-- 右上角 -->
      <view class="mb totalprice">
        <view class="mb">订单总收益(元)</view>
      </view>

      <view class="price-bottom">
        <text class="price">{{ totalprice }}</text>
        <text @click="toCashOut" class="tixian">去提现</text>
      </view>

      <!-- 列表 -->
      <view class="list" :key="index" v-for="(item, index) in distributionList">
        <!-- 左 -->
        <view class="list_l">
          <view class="time">{{ item.createtime }}</view>
          <view class="desc">{{ item.memo }}</view>
        </view>
        <!-- 金额 -->
        <view class="list_r">￥{{ item.money }}</view>
      </view>
    </view>
    <!-- 加载中 -->
<text class="loading-text">
		{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
</text>
   
</template>

<script>
var pageIndex = 1;

export default {
  data() {
    return {
      loadingType: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
      },
      totalprice: 0,
      // 分销列表
      distributionList: [],
    };
  },
  computed: {},
  methods: {
    getList() {
      const that = this;
      pageIndex = 1;
      uni.request({
        //url: "http://jjdj.hongliwangluo.com/api/common/distribution_list?token=97977206-0022-451c-a073-3acff1d52d07", //我
        //url: "http://jjdj.hongliwangluo.com/api/common/distribution_list?token=a1add376-5e56-4cde-acb5-32c07f52da90", //后端苗
        url: "http://jjdj.hongliwangluo.com/api/common/distribution_list",
        method: "POST",
        data: {
          page: pageIndex,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          this.totalprice = res.data.data.money.toFixed(2);
          that.distributionList = res.data.data.data;
          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },
    getMoreList() {
      // 加载更多列表
      const that = this;
      pageIndex++;
      if (that.loadingType != 0) {
        return false; //loadingType!=0;直接返回
      }
      that.loadingType = 1;
      uni.showNavigationBarLoading();
      uni.request({
        url: "http://jjdj.hongliwangluo.com/api/common/distribution_list",
        method: "POST",
        data: {
          page: pageIndex,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success(res) {
          if (that.distributionList.length == res.data.data.total) {
            that.loadingType = 2;
            uni.hideNavigationBarLoading(); //关闭加载动画
            return false;
          }
          that.distributionList = that.distributionList.concat(
            res.data.data.data
          );
          that.loadingType = 0; //将loadingType归0重置
          uni.hideNavigationBarLoading(); //关闭加载动画
        },
      });
    },

    // 去提现
    toCashOut() {
      uni.navigateTo({
        url: "/pages/app/cashOut/cashOut",
      });
    },
  },
  onLoad() {
    // 原有列表
    this.getList();
  },
  /*下拉刷新*/
  onPullDownRefresh() {
    this.getList();
  },
  onReachBottom() {
    this.getMoreList();

    console.log("滚到到底部了");
  },
};
</script>

<style  lang="scss" scoped >
.container {
  padding: 20rpx;
}
.list {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time {
  margin-bottom: 20rpx;
}

.mb {
  margin-bottom: 20rpx;
  // text-align: right;
}
.totalprice {
  text-align: right;
}
.price-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20rpx;
}
.tixian {
  margin-left: 10rpx;
  border: 1px solid red;
  color: red;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  padding: 1rpx 10rpx;
  border-radius: 30rpx;
}
.price {
  font-weight: 600;
}
.loading-text {
  height: 80upx;
  line-height: 80upx;
  font-size: 25upx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>